<template>
  <li @mouseenter="isShowBtn = true" @mouseleave="isShowBtn = false">
    <div class="root">
      <div class="item">
        <input type="checkbox" :checked="item.done" @change=checkedChange(item.id) />
      </div>
      <div class="item">
        <span>{{ item.content }}</span>
      </div>
      <div class="item">
        <button @click="deleteTodo(item.id)" v-show="isShowBtn">删除</button>
      </div>
    </div>
  </li>
</template>
<style lang="less" scoped>
  .root{
    border-bottom: 1px solid lightgrey;
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    gap:10px
  }
  .item:nth-last-child(1){
    margin-left: auto;
  }
</style>
<script>
export default {
  props: ["item", "finish"],
  data() {
    return {
      isShowBtn: false,
    };
  },
  methods: {
    checkedChange(id) {
      this.$bus.$emit('finishTodo',id)
    },
    deleteTodo(id){
      this.$bus.$emit('deleteTodo',id,1,2,3,4,5)
    }
  },
};
</script>
